<!--
 搜索为空时组件
 @Author: mosowe
 @Date:2022-12-28 15:00:13
-->

<template>
  <view class="zo-search-empty">
    <view class="content">
      <!-- 字体图标 -->
      <view
        class="icon-test"
        :class="props.icon"
        :style="props.iconStyle"
        v-if="props.icon.indexOf('/') === -1"></view>
      <!-- 图片图标 -->
      <image
        class="icon-image"
        :src="props.icon"
        :style="props.iconStyle"
        v-else
        mode="aspectFit"></image>
      <!-- 文案 -->
      <view class="text">{{ props.text }}</view>
    </view>
  </view>
</template>

<script setup lang="ts">
// props定义
interface PropsType {
  text?: string; // 文案
  icon?: string; // 图标，可以是字体图标、本地图片或网络图片
  iconStyle?: any; // 图标样式
}
const props = withDefaults(defineProps<PropsType>(), {
  text: '暂无匹配结果',
  icon: 'zoicon zo-no-data',
  iconStyle: {}
});
</script>

<style lang="scss" scoped>
.zo-search-empty {
  flex: 1;
  width: 100%;
  height: 100%;
  display: flex;
  .content {
    margin: auto;
    .icon-test {
      font-size: 120rpx;
      color: #aaaaab;
      margin-bottom: 30rpx;
    }
    .icon-image {
      width: 120rpx;
      height: 120rpx;
      margin-bottom: 30rpx;
    }
    .text {
      font-size: 26rpx;
      color: #aaaaab;
      text-align: center;
    }
  }
}
</style>
